<template>
  <div id="login_app">
      <div class="panel">
        <h2 class="title">登录</h2>
        <div class="form-control">
          <input type="text" v-model.trim="formData.username">
        </div>  
        <div class="form-control">
          <input type="password" v-model.trim="formData.password">
        </div>  
        <div class="form-control">
          <button type="button" @click="submit">登录</button>
        </div>  
      </div>  
  </div>
</template>

<script>
export default {
  data(){
    return {
      formData: {
        username: "",
        password: ""
      }
    }
  },
  methods:{
    submit(){
      if(this.formData.username === "admin" && this.formData.password === "123"){
        localStorage.setItem("islogin","1")
        alert("登录成功")
        this.$router.push("/index")
      }else{
        alert("没登上")
      }
    }
  }
}
</script>

<style scoped>
.panel{
  width: 400px;
  height: 400px;
  background-color: #3d4a5d;
  margin: 100px auto;
  color: white;
  padding: 50px;
  box-sizing: border-box;
}
.title{
  text-align: center;
}
.form-control{
  height: 60px;
}
.form-control>input,.form-control>button{
  width: 100%;
  height: 30px;
}

</style>